<template>
	<view class="content">
		<lxc_nav text='累计邀请奖励' :bacicon="'#fff'" :background='bac'></lxc_nav>
		<view id="box">
			<view class="ba_top">
				<image src="../../static/all/bjl.png" mode=""></image>
			</view>
			<view class="number">
				<text>24642.21540</text><br>
				<text>{{$t('all.n1')}}</text>
			</view>
			<view class="friend">
				<view class="top_friend">
					<view class="top_friend_left">
						<text>12</text>
						</br>
						<text>{{$t('all.n1')}}</text>
					</view>
					<view class="top_friend_right">
						<text>12</text>
						</br>
						<text>{{$t('all.o1')}}</text>
					</view>
				</view>
				<view class="bottom_friend">
					<view class="top_friend_left">
						<text>12</text>
						</br>
						<text>{{$t('all.p1')}}</text>
					</view>
					<view class="top_friend_right">
						<text>12</text>
						</br>
						<text>{{$t('all.q1')}}</text>
					</view>
					<view class="top_friend_right">
						<text>12</text>
						</br>
						<text>{{$t('all.r1')}}</text>
					</view>
				</view>
			</view>
			<view class="interest">
				<image src="../../static/home_page/quany.png" mode=""></image>
				<text>{{$t('all.s1')}}</text>
			</view>
			<view class="quanyi">
				<view class="top_friend2">
					<view class="top_friend_left">
						<text>12</text>
						</br>
						<text>{{$t('all.t1')}}</text>
					</view>
					<view class="top_friend_right">
						<text>12</text>
						</br>
						<text>{{$t('all.v1')}}</text>
					</view>
				</view>
			</view>
			<view class="interest">
				<image src="../../static/home_page/yqlb.png" mode=""></image>
				<text>{{$t('all.w1')}}</text>
			</view>
			<view class="yqlb">
				<view class="yqlb_list">
					<view style="height: 27rpx;"></view>
					<view class="yqlb_list_top">
						<text>MRRYAK</text>
						<text>2021-06-08 15:05</text>
					</view>
					<view class="yqlb_list_main">
						<text>{{$t('all.wyy1')}}：86-88754552</text>
					</view>
					<view class="yqlb_list_bottom">
						<view class="bottom_left">
							<text>{{$t('all.x1')}}</text>
							</br>
							<text>级别</text>
						</view>
						<view class="bottom_main">
							<text>0.00USDT</text>
							</br>
							<text>量化利益</text>
						</view><view class="bottom_right">
							<text id="right1">0.00USDT</text>
							</br>
							<text id="right2">推广业绩</text>
						</view>
					</view>
				</view>
				<view class="yqlb_list">
					<view style="height: 27rpx;"></view>
					<view class="yqlb_list_top">
						<text>MRRYAK</text>
						<text>2021-06-08 15:05</text>
					</view>
					<view class="yqlb_list_main">
						<text>{{$t('all.wyy1')}}：86-88754552</text>
					</view>
					<view class="yqlb_list_bottom">
						<view class="bottom_left">
							<text>注册会员</text>
							</br>
							<text>级别</text>
						</view>
						<view class="bottom_main">
							<text>0.00USDT</text>
							</br>
							<text>量化利益</text>
						</view><view class="bottom_right">
							<text id="right1">0.00USDT</text>
							</br>
							<text id="right2">推广业绩</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lxc_nav from '../../components/nav.vue'
	export default {
		components: {
			lxc_nav
		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			// this.scrollTop = e.scrollTop;
			console.log(e.scrollTop);
			if (e.scrollTop > 22) {
				this.bac = {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 1), rgba(18, 174, 255, 1))'
				}
			} else {
				this.bac = {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 0), rgba(18, 174, 255, 0))'
				}
			}
		},
		data() {
			return {
				bac: {
					backgroundImage: 'linear-gradient(150deg,rgba(25, 137, 250, 0), rgba(18, 174, 255, 0))'
				}
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color:#f5f5f5 ;
	}
	.ba_top {
		position: absolute;
		width: 100vw;
		top: 0rpx;
	}
	.ba_top image{
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: 0rpx;
	}
	#box {
		position: relative;
		width: 100vw;
		top: 0rpx;
	}
	.number{
		position: relative;
		height: 272rpx;
		width: 100vw;
		text-align: center;
		padding-top: 140rpx;
		padding-bottom: 46rpx;
	}
	.number text:nth-child(1){
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 40rpx;
		text-shadow: 0px 0px 28rpx rgba(1, 17, 116, 0.1);
	}
	.number text:nth-child(3){
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 40rpx;
		margin-top: 18rpx;
		margin-bottom: 46rpx;
	}
	.friend{
		position: relative;
		width: 92vw;
		margin-left: 4vw;
		height: 310rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 28rpx 0px rgba(1, 17, 116, 0.1);
		border-radius: 10rpx;
	}
	.quanyi{
		position: relative;
		width: 92vw;
		margin-left: 4vw;
		height: 140rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 28rpx 0px rgba(1, 17, 116, 0.1);
		border-radius: 10rpx;
	}
	.top_friend{
		height: 50%;
		width: 90%;
		display: flex;
		margin-left: 5%;
	}
	.top_friend view{
		width: 50%;
		text-align: center;
	}
	.top_friend view text:nth-child(1){
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ED3901;
		line-height: 40rpx;
		margin-top: 39rpx;
	}
	.top_friend view text:nth-child(3){
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.bottom_friend{
		height: 50%;
		width: 100%;
		display: flex;
	}
	.bottom_friend view{
		width: 34%;
		text-align: center;
	}
	.bottom_friend view text:nth-child(1){
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ED3901;
		line-height: 40rpx;
		margin-top: 39rpx;
	}
	.bottom_friend view text:nth-child(3){
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.interest{
		width: 92vw;
		margin-left: 4vw;
		height: 86rpx;
		display: flex;
	}
	.interest image{
		width: 30rpx;
		height: 28rpx;
		margin-top: 29rpx;
	}
	.interest text{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		margin-top: 23rpx;
		margin-left: 11rpx;
	}
	.top_friend2{
		height: 50%;
		width: 90%;
		display: flex;
		margin-left: 5%;
	}
	.top_friend2 view{
		width: 50%;
		text-align: center;
	}
	.top_friend2 view text:nth-child(1){
		display: inline-block;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ED3901;
		line-height: 40rpx;
		margin-top: 28rpx;
	}
	.top_friend2 view text:nth-child(3){
		display: inline-block;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
		margin-top: 10rpx;
	}
	.yqlb{
		width: 92vw;
		margin-left: 4vw;
		// height: 400rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 28rpx 0px rgba(1, 17, 116, 0.1);
		border-radius: 10rpx;
		padding-bottom: 159rpx;
	}
	.yqlb_list{
		width: 84vw;
		height: 215rpx;
		margin-left: 4vw;
		border-bottom: 1rpx solid #E0E0E0;
		position: relative;
	}
	.yqlb_list_top{
		width: 100%;
		height: 40rpx;
	}
	.yqlb_list_top text:nth-child(1){
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
	}
	.yqlb_list_top text:nth-child(2){
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
		position: absolute;
		right: 0rpx;
	}
	.yqlb_list_main{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
		height: 40rpx;
	}
	.yqlb_list_bottom{
		width: 100%;
		height: 110rpx;
		display: flex;
	}
	.yqlb_list_bottom view text:first-child{
		display: inline-block;
		height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 40rpx;
		margin-top: 12rpx;
	}
	.yqlb_list_bottom view text:nth-child(3){
		display: inline-block;
		height: 40rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
	}
	.bottom_left{
		width: 34%;
	}
	.bottom_main{
		width: 34%;
		text-align: center;
	}
	.bottom_right {
		width: 34%;
		position: relative;
	}
	#right1{
		position: absolute;
		right: 0rpx;
	}
	#right2{
		position: absolute;
		right: 0rpx;
		top: 54rpx;
	}
</style>
